<template>
  <div class="no-padding no-margin">

      <header class="main-header">

        <!-- Logo -->
        <a href="index2.html" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><b>1</b>01</span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b>101</b>CRM</span>
        </a>

        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-commenting-o"></i>
                  <span class="label label-success">4</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 4 messages</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- start message -->
                        <a href="#">
                          <div class="pull-left">
                            <img src="/static/img/101-avatar.png" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            Support Team
                            <small><i class="fa fa-clock-o"></i> 5 mins</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <!-- end message -->
                      <li>
                        <a href="#">
                          <div class="pull-left">
                            <img src="/static/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            AdminLTE Design Team
                            <small><i class="fa fa-clock-o"></i> 2 hours</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <div class="pull-left">
                            <img src="/static/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            Developers
                            <small><i class="fa fa-clock-o"></i> Today</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <div class="pull-left">
                            <img src="/static/img/user3-128x128.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            Sales Department
                            <small><i class="fa fa-clock-o"></i> Yesterday</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <div class="pull-left">
                            <img src="/static/img/user4-128x128.jpg" class="img-circle" alt="User Image">
                          </div>
                          <h4>
                            Reviewers
                            <small><i class="fa fa-clock-o"></i> 2 days</small>
                          </h4>
                          <p>Why not buy a new awesome theme?</p>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer"><a href="#">See All Messages</a></li>
                </ul>
              </li>
              <!-- Notifications: style can be found in dropdown.less -->
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-warning">10</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 10 notifications</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <i class="fa fa-users text-aqua"></i> 5 new members joined today
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
                          page and may cause design problems
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="fa fa-users text-red"></i> 5 new members joined
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="fa fa-shopping-cart text-green"></i> 25 sales made
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <i class="fa fa-user text-red"></i> You changed your username
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer"><a href="#">View all</a></li>
                </ul>
              </li>
              <!-- Tasks: style can be found in dropdown.less -->
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-tasks"></i>
                  <span class="label label-danger">9</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">You have 9 tasks</li>
                  <li>
                    <!-- inner menu: contains the actual data -->
                    <ul class="menu">
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            Design some buttons
                            <small class="pull-right">20%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">20% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>
                      <!-- end task item -->
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            Create a nice theme
                            <small class="pull-right">40%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"
                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">40% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>
                      <!-- end task item -->
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            Some task I need to do
                            <small class="pull-right">60%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"
                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">60% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>
                      <!-- end task item -->
                      <li><!-- Task item -->
                        <a href="#">
                          <h3>
                            Make beautiful transitions
                            <small class="pull-right">80%</small>
                          </h3>
                          <div class="progress xs">
                            <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"
                                 aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              <span class="sr-only">80% Complete</span>
                            </div>
                          </div>
                        </a>
                      </li>
                      <!-- end task item -->
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">View all tasks</a>
                  </li>
                </ul>
              </li>
              <!-- User Account: style can be found in dropdown.less -->
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="/static/img/101-avatar.png" class="user-image" alt="User Image">
                  <span class="hidden-xs">{{user.name}}</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- User image -->
                  <li class="user-header">
                    <img src="/static/img/101-avatar.png" class="img-circle" alt="User Image">

                    <p>
                      {{user.name}} - 系统管理员
                      <small>{{user.description}}</small>
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                    <div class="row">
                      <div class="col-xs-4 text-center">
                        <a>开发客户</a><br/>
                        <a href="#">50</a>
                      </div>
                      <div class="col-xs-4 text-center">
                        <a>服务客户</a><br/>
                        <a href="#">50</a>
                      </div>
                      <div class="col-xs-4 text-center">
                        <a>客户满意</a><br/>
                        <a href="#">50%</a>
                      </div>
                    </div>
                    <!-- /.row -->
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <router-link :to="{ name: 'ProfileIndex' }" class="btn btn-default btn-flat">个人信息</router-link>
                    </div>
                    <div class="pull-right">
                      <a class="btn btn-default btn-flat" @click="logout">退出登录</a>
                    </div>
                  </li>
                </ul>
              </li>
              <!-- Control Sidebar Toggle Button -->
              <!-- <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li> -->
            </ul>
          </div>

        </nav>
      </header>
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="/static/img/101-avatar.png" class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
              <p>{{user.name}}</p>
              <a> 系统管理员</a>
            </div>
          </div>
          <!-- search form -->
          <form action="#" method="get" class="sidebar-form">
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="客户名称/联系人电话">
              <span class="input-group-btn">
                    <button type="submit" name="search" id="search-btn" class="btn btn-flat">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
            </div>
          </form>
          <!-- /.search form -->
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu" data-widget="tree">
            <li class="header">主菜单</li>
            <li v-for="item in sidebarMenus" :class="{treeview:item.children != undefined}">
                <router-link :to="item.href == undefined ? '' : item.href">
                    <i :class="item.icon"></i> <span>{{item.name}}</span>
                    <span v-if="item.children != undefined" class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </router-link>
                <ul v-if="item.children != undefined" class="treeview-menu">
                  <li v-for="subitem in item.children"><router-link :to="subitem.href"><i class="fa fa-circle-o"></i> {{subitem.name}}</router-link></li>
                </ul>
            </li>
          </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <transition name="slide-fade" mode="out-in"><router-view class="router-view"/></transition>

    <footer class="main-footer" style="position:fixed !important;height:51px !important; bottom:0px !important;width:100% !important;">
      <div class="pull-right hidden-xs">
        <b>Version</b> 2.4.0
      </div>
      <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
      reserved.
    </footer>
    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>

  </div>
</template>


<script>
import Adminlte from '@/modules/Adminlte'
import Auth from '@/modules/Auth'
import { mapState } from 'vuex'

export default {
    name: 'AppLayout',
    data(){
        return {
            sidebarMenus:[],
        };
    },
    computed:{
        ...mapState(['user'])
    },

    methods: {
        logout() {
            if(!confirm('确认退出吗?')){
                return;
            }
            Auth.logout();
            this.$router.push({name:'Login'});
        }
    },

    beforeRouteEnter(to,from,next){
        //初始化模板框架Js代码

        next((vm) => {
            var menuData = [
                {name:'控制台',href:'/crm/dashboard',icon:'fa fa-users'},
                {name:'营销管理',icon:'fa fa-briefcase',children:[
                    {name:'销售机会管理',href:'/crm/sale_intention/index'},{name:'客户开发计划',href:'/crm/custom_dev/index'}]},
                {name:'客户管理',icon:'fa fa-users',children:[
                    {name:'客户信息',href:'/crm/custom/index'},{name:'联系人',href:'/crm/contact/index'},{name:'拜访记录',href:'/crm/visit/index'},{name:'客户订单',href:'/crm/order/index'},{name:'客户流失管理',href:'/crm/custom/lost/index'}]},
                {name:'客户服务管理',icon:'fa fa-book',children:[
                    {name:'服务创建',href:'/crm/service/edit/0'},{name:'服务分配',href:'/crm/service/assign/list'},{name:'服务处理',href:'/crm/service/do/list'},{name:'服务反馈',href:'/crm/service/result/list'},{name:'服务归档',href:'/crm/service/archive/list'}]},
                {name:'系统管理',icon:'fa fa-cogs',children:[
                    {name:'基础数据管理',href:'/crm/basedata/index'},{name:'角色管理',href:'/crm/role/index'},{name:'用户管理',href:'/crm/user/index'},{name:'产品库存查询',href:'/crm/product/index'},{name:'操作日志',href:'/crm/oplog/index'}]},
            ];
            Adminlte.init();
            vm.sidebarMenus = menuData;
        });

    },
    beforeRouteUpdate(to,from,next){
        console.log('AppLayout beforeRouteUpdate');
        // console.log(this);
        next();
    },
    beforeRouteLeave(to,from,next){

        next();
    }
}
</script>
